<template>
  <div class="mask">
  <div class="div">
   <div class="top">
   <p>|</p>
   <span>添加考勤组</span>
   </div>
    <div class="dtop">
      <div class="wen">
        <span class="bb">| </span>
        <span class="pp">基本信息</span>
      </div>

      <div class="top0">
        <p>考勤组名称*</p>
        <el-input
          placeholder="请输入考勤组名称"
          v-model="ruleForm.name"
          size="large"
          type="text"
          autocomplete="off"
        />
        
      </div>
      <div class="top1">
        <p>备注</p>
        <el-select
          v-model="value3"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="备注"
          :remote-method="remoteMethod"
          :loading="loading"
        >
        </el-select>
      </div>
      <div class="top1">
        <p>所属项目*</p>
        <el-select
        clearable
        v-model="ruleForm.items"
        class="m-2"
        placeholder="Select"
        size="large"
      >
        <el-option
          v-for="item in goods"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
        
      </div>
    </div>
    <div class="new">
      <span class="newb">|</span>
      <span>用户配置</span>
    </div>
    <div class="dpei">
      <div class="left">
        <span class="yong">可选用户</span>
        <div class="lieb">
          <div class="top0">
           <span>搜索</span>
            <el-input
          placeholder="请输入姓名/联系人"
          v-model="query.name"
          size="large"
          type="text"
          autocomplete="off"
        />
          </div>
          <div class="ren">
            <span>人员类型</span>
            <el-select
        clearable
        v-model="query.type"
        class="m-2"
        placeholder="Select"
        size="large"
      >
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
          </div>
        </div>
        <div class="lieba">
          <div class="ren">
            <span>所在承建商</span>
            <el-select
        clearable
        v-model="query.contractor"
        class="m-2"
        placeholder="Select"
        size="large"
      >
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
          </div>
          <div class="ren">
            <span>所在班组</span>
            <el-select v-model="query.class" clearable placeholder="---请选择---">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <el-button type="success" class="sou" @click="changobtn">搜索</el-button>
        </div>

        <div class="table">
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            height="200"
            @selection-change="handleSelectionChange()"
          
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="姓名" prop="name">
            </el-table-column>
            <el-table-column property="name" label="联系手机" prop="phone"/>
            <el-table-column property="address" label="所在承建商" prop="contractor"/>
            <el-table-column property="address" label="人员类型" prop="type"/>
            <el-table-column property="name" label="所在班组" prop="class"/>
          </el-table>
        </div>
      </div>
      <div class="middle">
        <div class="box">
          <input type="checkbox" />
        </div>
      </div>
      <div class="right">
        <div class="top" :model="ruleForm.num">
          <span>已选用户</span>
          <p>{{ nums }}人</p>
        </div>
        <div class="list">
          <div class="people">
            <span v-text="names.name"></span>
            <input type="checkbox" />
          </div>
          <div class="people">
            <span v-text="names.name1"></span>
            <input type="checkbox" />
          </div>
        </div>
      </div>
    </div>
    <el-divider />
    <div class="bao">
      <el-button type="warning" @click="cun">保存</el-button>
      <el-button type="info" @click="obtns">取消</el-button>
     
    </div>
   
  </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import service from '../../../utils/service'
import { ElTable } from "element-plus";
import { ElMessage } from "element-plus";

import { method } from "lodash";


const value3 = ref('')
const goods = reactive<any[]>([]);
const options1=reactive<any[]>([])
const options2=reactive<any[]>([])
  const options3=reactive<any[]>([])
const loading = ref(false);
const remoteMethod = (query: string) => {};

interface Iiebiao{
  name:string,
  phone:string,
  contractor:string,
  groups:string,
  class:string,
  type:string
  
}
const tableData=reactive<Iiebiao[]>([])
const liebiao=()=>{
  service({
    url:"/peoples"
  }).then((res)=>{
    tableData.push(...res.data)
  })
}
liebiao()
//下拉数据
const changla = () => {
  service({
    url: "/Project",
  }).then((res) => {
    goods.push(...res.data);
  });
};
changla();
const changla1=()=>{
  service({
    url: "/Contractor",
  }).then((res) => {
    options1.push(...res.data);
   
    
  });
}
changla1()
const changla2=()=>{
  service({
    url: "/Personneltype",
  }).then((res) => {
    options2.push(...res.data);
   
    
  });
}
changla2()
const changla3=()=>{
  service({
    url: "/class",
  }).then((res) => {
    options3.push(...res.data);
   
    
  });
}
changla3()

//添加
const ruleForm = reactive({
  name: "",
  items: "",
  num:"",
 

});

const cun=()=>{
  service({
    url:"http://localhost:3000/lists",
    method:"post",
    data:{
      name:ruleForm.name,
      items:ruleForm.items,
      num:ruleForm.num
      
    }

  }).then((res=>{
    if(res.data){
      ElMessage({
          message: "添加成功！",
          type: "success",
        });
    }


  }))
}
//搜索
const query = reactive<{
  name?: string;
 type?:string;
 contractor?:string,
 class?:string

}>({
  name: "",
  type:"",
  contractor:"",
  class:""
  
});
const changobtn=()=>{
  service({
    url: "http://localhost:3000/peoples",
    method:"get",
    params:{
      name:query.name,
      type:query.type,
      contractor:query.contractor,
      class:query.class
    }

  }).then((res=>{
    tableData.length=0
    tableData.push(...res.data)
    console.log(res.data);
  }))

}
// 声明事件
const emit = defineEmits<{
  (e: "hide"): void;
  (e: "updatesuccess"): void;
  
}>();
// 取消
const obtns = () => {
  // 触发隐藏事件
  emit("hide");
};
//定义人数，木有点击为0
let nums:any=ref(0)
interface Iname{
  name:string,
  name1:string
}
const names=reactive<Iname>({
  name:"",
  name1:""
})

const handleSelectionChange=()=>{
  service({
    url:"http://localhost:3000/peoples",
    method:"get"
  }).then((res=>{
    names.name=res.data[0].name
    names.name1=res.data[1].name
    
    
  
    
    
  }))
  nums.value++
  


  
  
}



</script>

<style scoped>
.mask {
  /* 遮罩层的写法 */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.div {
  width: 939px;
  height: 700px;
  background-color: rgb(235, 238, 238);
  position: fixed;
  top: 1px;
  left: 300px;
  z-index: 100;
  overflow: auto;
  
}
.top{
  display: flex;
 
}
.top p{
  color: #3bb19c;
  
}
.top span{
  font-weight: 700;
  
}
.dtop{
  margin-top: -11px;
}
.div .dtop span {
  font-weight: 700;
  margin-left: 50px;
}
.div .dtop .top0{
  width: 400px;
  display: flex;
  margin-left: 30px;
  height: 30px;
 
}
.div .dtop .top0 p{
  line-height: 30px;
}
.div .dtop .top0 .el-input{
  width: 200px;
  margin-left: 30px;
  height: 30px;
}

.div .dtop .top1 {
  width: 400px;
  display: flex;
  margin: 15px 50px;
}
.div .dtop .top1 .el-select {
  width: 250px;
  margin-left: 30px;
}
.div .dpei {
  margin-left: 50px;
  display: flex;
}
.div .dpei .left {
  border: 1px solid #eaeaea;
}
.div .dpei .left .yong {
  height: 30px;
  line-height: 30px;
  background-color: white;
  display: block;
}
.div .dpei .left .lieb {
  display: flex;
  margin: 15px;
  justify-content: space-evenly;

}
.div .dpei .left .el-select {
  margin-left: 10px;
}
.div .dpei .left .lieb .top2 {
  display: flex;
}

  
  

.div .dpei .left .lieb .top0 .el-input{
  margin-left: 27px;
  margin-top: -35px;
  
}


.div .dpei .left .lieb .ren {
  margin-left: 27px;
  display: flex;
}
.div .dpei .left .lieba {
  display: flex;
  margin: 10px;
}
.div .dpei .left .lieba .ren{
  display: flex;
  margin-left: 5px;
}
.div .dpei .left .lieba .ren .el-option{
  width: 150px;
}


.div .dpei .left .lieba .sou {
  margin-left: 10px;
}
.dpei .middle .box {
  width: 50px;
  height: 50px;
  border: 1px solid #eaeaea;
  margin-left: 20px;
  margin-top: 138px;
  border-radius: 5px;
}
.dpei .middle .box input {
  margin-left: 15px;
  margin-top: 15px;
}
.dpei .right {
  width: 200px;
  border: 1px solid black;
  margin: 0 10px;
}
.dpei .right .top {
  display: flex;
  justify-content: space-around;
}
.dpei .right .list .people {
  display: flex;
  justify-content: space-around;
}
.bao {
  float: right;
  margin-right: 100px;
  margin-top: -10px;
}
.div .new {
  margin-left: 50px;
  font-weight: 700;
}
.div .new .newb {
  color: #3bb19c;
}

.div .dtop .wen .bb {
  color: #3bb19c;
}
.div .dtop .wen .pp {
  margin-left: 0;
}
.el-divider{
  margin-top: 10px;
}
</style>